import { Navigate } from "react-router-dom";
import Gedan from "../pages/Gedan/Gedan";
import Singer from "../pages/Singer/Singer";
import YYG from "../pages/YYG/YYG";
import MyMusic from "../pages/MyMusic/MyMusic";
import NotFound from "../pages/NotFound/NotFound";
import Home from "../pages/Home/Home";
//1. 导入 lazy 和 suspense
//lazy 懒  suspense 悬念
import {lazy, Suspense} from 'react'
//2. 使用 lazy 与 import 函数进行导入
let HeroList = lazy(() => {
  return import('../pages/HeroList/HeroList');
});
let HeroDetail = lazy(() => import('../pages/HeroDetail/HeroDetail'));

//声明一个函数
function load(ComName){
  return <Suspense fallback={<h2>加载中.....</h2>}><ComName /></Suspense>
}

let routesArr = [
  {
    path: '/yyg',
    element: <YYG />,
    children: [
      {
        path: 'gedan',
        element: <Gedan />
      },
      {
        path: 'singer',
        element: <Singer />
      },
      {
        element: <Navigate to="/yyg/gedan" />,
        index: true
      }
    ]
  },
  {
    path: '/mymusic',
    element: <MyMusic />
  },
  {
    path: '*',
    element: <NotFound />
  },
  {
    path: '/home',
    element: <Home />
  },
  //显示英雄列表
  {
    path: '/heros',
    // 3. 使用 Suspense 包裹组件标签
    element: load(HeroList)
  },
  // 显示英雄的详情
  {
    path: '/hero',
    element: load(HeroDetail)
  }
];

//暴露
export default routesArr;